<template>
  <div>
    <div v-if="searchStatus" class="box-shadow pad10 mgb10 flex jbetween">
      <div>
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          class="fnmb"
        >
          <el-form-item label="标题">
            <el-input
              v-model="queryParams.Title"
              placeholder="请输入"
              clearable
              style="width: 212px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="名称">
            <el-input
              v-model="queryParams.Name"
              placeholder="请输入"
              clearable
              style="width: 212px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="内容">
            <el-input
              v-model="queryParams.Content"
              placeholder="请输入"
              clearable
              style="width: 212px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="类型">
            <el-select
              v-model="queryParams.Type"
              clearable
              placeholder="请选择"
              style="width: 212px"
            >
              <el-option label="荣誉资质" :value="1"></el-option>
              <el-option label="文化熏陶" :value="2"></el-option>
              <el-option label="规章制度" :value="3"></el-option>
              <el-option label="教师团队" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex acenter jend fnw">
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </div>
    </div>
    <MyTable
      :tableList="tableList"
      :total="Total"
      :columns="columns"
      v-model:page="page"
      v-model:searchStatus="searchStatus"
      :btnList="$checkBtn(['BiBoard:edit', 'BiBoard:delete'])"
      @getList="getList"
      @edit="handleEdit"
      @delete="handleDelete"
    >
      <template v-slot:tabTop>
        <el-button
          type="primary"
          v-hasPermi="['BiBoard:add']"
          icon="CirclePlusFilled"
          @click="handleAdd"
          >添加数据</el-button
        >
      </template>
    </MyTable>
    <MyDialog
      v-model:show="show"
      :title="title"
      :formRef="formRef"
      :width="500"
      @confirm="SubmitData"
    >
      <el-form
        :model="formData"
        :rules="rules"
        inline
        :label-width="80"
        ref="formRef"
        class="wid100"
      >
        <el-form-item label="封面" prop="Pictrue">
          <FileUpload
            v-model:fileList="formData.Pictrue"
            :iconList="['preview']"
            :limt="1"
            :limitType="['.jpg', '.jpeg', '.png']"
            :detail="false"
            type="img"
          ></FileUpload>
        </el-form-item>
        <el-form-item label="标题" prop="Title">
          <el-input v-model="formData.Title" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="名称" prop="Name">
          <el-input v-model="formData.Name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="类型" prop="Type">
          <el-select v-model="formData.Type" clearable placeholder="请选择">
            <el-option label="荣誉资质" :value="1"></el-option>
            <el-option label="文化熏陶" :value="2"></el-option>
            <el-option label="规章制度" :value="3"></el-option>
            <el-option label="教师团队" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="Content">
          <el-input v-model="formData.Content" placeholder="请输入" clearable />
        </el-form-item>
      </el-form>
    </MyDialog>
  </div>
</template>

<script setup name="BiBoard">
import { ref, getCurrentInstance, onMounted } from 'vue';
import {
  DelBIData,
  GetBIDataList_Page,
  AddOrUpdateBIData,
  GetBIDataDetail
} from '@/api/system/biboard.js';

const { proxy } = getCurrentInstance();
const tableList = ref([]);
const Total = ref(0);
const columns = ref([
  { label: '序号' },
  { label: '标题', prop: 'Title' },
  { label: '名称', prop: 'Name' },
  { label: '内容', prop: 'Content' },
  { label: '封面', prop: 'Pictrue', img: true },
  {
    label: '类型',
    prop: 'Type',
    types: {
      1: '荣誉资质',
      2: '文化熏陶',
      3: '规章制度',
      4: '教师团队'
    }
  },
  { label: '创建人', prop: 'CreateUser', user: true },
  { label: '修改时间', prop: 'UpdateTime' },
  { label: '修改人', prop: 'UpdateUser', user: true },
  { label: '操作', width: 160 }
]);
proxy.$formatKey(columns.value);
const page = ref({
  PageIndex: 1,
  PageSize: 10
});
const searchStatus = ref(true);
const queryParams = ref({
  Code: '',
  Name: '',
  NoPage: '' //如果传"true"，则返回全部数据不分页
});
const queryRef = ref();
const show = ref(false);
const title = ref();
const formRef = ref();
const rules = ref({
  Title: [{ required: true, message: '请输入', trigger: 'blur' }],
  Name: [{ required: true, message: '请输入', trigger: 'blur' }],
  Pictrue: [{ required: true, message: '请选择', trigger: 'change' }],
  Type: [{ required: true, message: '请选择', trigger: 'change' }]
});
const formData = ref({});

onMounted(() => {
  getList();
});

async function getList() {
  try {
    let query = {
      ...queryParams.value,
      ...page.value
    };
    let res = await GetBIDataList_Page(query);
    tableList.value = res.data.List;
    Total.value = res.data.Total;
  } catch (error) {
    console.log(error);
  }
}

async function SubmitData(val) {
  console.log(val);
  if (val) {
    try {
      let query = {
        ...formData.value,
        Pictrue: formData.value?.Pictrue?.map(item =>
          proxy.$removeFileHead(item.Path)
        )[0]
      };
      await AddOrUpdateBIData(query);
      proxy.$modal.msgSuccess('提交成功');
      show.value = false;
      getList();
    } catch (error) {
      console.log(error);
    }
  }
}

function handleEdit(row) {
  title.value = '修改数据';
  formData.value = {
    ...row,
    Pictrue: [{ Path: row.Pictrue, Name: '图片', Suffix: '.png' }]
  };
  show.value = true;
}
async function handleDelete(row) {
  try {
    await DelBIData({ ID: row.ID });
    proxy.$modal.msgSuccess('删除成功');
    getList();
  } catch (error) {
    console.log(error);
  }
}
function handleAdd() {
  title.value = '添加数据';
  formData.value = {};
  show.value = true;
}
function handleQuery() {
  page.value.PageIndex = 1;
  getList();
}
function resetQuery() {
  queryParams.value = {
    Title: '', //标题
    Name: '', //名称
    Content: '', //内容
    NoPage: '', //内容
    Type: '' //类型 - 1:荣誉资质 2:文化熏陶 3:规章制度 4:教师团队
  };
  handleQuery();
}
</script>

<style lang="scss" scoped></style>
